<!doctype html>
<html lang="en" class="feedback">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>完成页面</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
		<style>
			.mui-bar{
				background-color: rgba(0,153,204,.9);
			}
			.mui-icon{
				color: #FFFFFF;
			}
			#submit{
			}
			.uploadimg{
				min-height: 60px;
				padding: 1.9%;
				padding-bottom: 0;
			}
			#head-img{
				width: 100%;
				height: 95%;
			}
			.uploadimg .image-item{
				width: 18.1%;
				height: 60px;
				padding: 10px;
			}
			.uploadimg .addImg{
				margin-right: 6px;
			}
			.image-item .image-close {
				position: absolute;
				display: inline-block;
				right: -6px;
				top: -6px;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border-radius: 12px;
				background-color: #FF5053;
				color: #f3f3f3;
				border: solid 1px #FF5053;
				font-size: 9px;
				font-weight: 200;
				z-index: 1;
			}
			#send{
				width: 90%;
				height: 100%;
				float: left;
			}
			/*.image-item.space .image-close {
				display: none;
			}*/
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">完成任务</h1>
		</header>
		<div class="mui-bar mui-bar-tab btn-detail"  id='btn-opears' style="background: rgba(0,0,0,0);-webkit-box-shadow:0 0 0px rgba(0,0,0,.85);">
			<button class="mui-btn mui-btn-block mui-btn-primary" id='send'>提交</button>
		</div>
		
		<div class="mui-content">
			<p class="mui-h4">任务描述</p>
			<div class="row mui-input-row">
				<textarea id='question' class="mui-input-clear question" placeholder="请详细描述该任务的问题..."></textarea>
			</div>
			<p class="mui-h4 mui-hidden">添加图片</p>
			
			<div class="uploadimg row mui-hidden" id="image-list">
				<div class="image-item addImg" style="background-image: url(images/addImg.jpg);"></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/md5.js" ></script>
		<script type="text/javascript" src="../js/uuid.js" ></script>
		<script type="text/javascript" src="../js/utils.js" ></script>
	</body>
	
	<script>
	mui.plusReady(function() {
		
		var imageMaxLength = 5;
		var self = plus.webview.currentWebview();
		var taskId = self.taskId ;
		var search = self.search;
		mui(".mui-content").on("tap",".addImg",function(event){
			var images = document.getElementById('image-list').querySelectorAll(".upImage");
			if(images && images.length >=imageMaxLength){
				mui.toast('图片已达上限');
				return;
			}
			var btns = [{
				title: "拍照"
			}, {
				title: "从手机相册选择"
			}];
			plus.nativeUI.actionSheet({
				cancel: "取消",
				buttons: btns
			}, function(btn) {
				switch (btn.index) {
					case 0:
						break;
					case 1:{
						getImage();
						break;
					}
					case 2:{
						galleryImg();
						break;
					}
					default:
						break
				}
			})
			
		});
		
		document.getElementById("send").addEventListener("tap",function(event){
//			var images = document.getElementById('image-list').querySelectorAll(".upImage");
			var description = document.getElementById("question").value ;
//			var imagesFile = [] ;
//			mui.each(images,function(i,img){
//				var image = img.getAttribute('data-original');
//				var _path = plus.io.convertLocalFileSystemURL(image) ;
//				imagesFile.push(_path) ;
//			});
			xhz.upload(EMC_URL_TASK_COMPLETE,{taskId:taskId, description: description},function(data){
				console.debug('data is '+data) ;
				data = JSON.parse(data) ;
				if(data && data.code == 1){
					plus.nativeUI.closeWaiting();
					mui.toast("亲，您又出色的完成了一项任务") ;
					var lastPage = plus.webview.getWebviewById('emc-task-search');
					mui.fire(lastPage, "taskinfo:removed",{id:'node_'+taskId});
					
					var unacceptPage = plus.webview.getWebviewById("emc-search-task-detail-goingon");
					mui.fire(unacceptPage, "page:close");
					
					var cview = plus.webview.currentWebview();
					cview.close() ;
					return ;
				}
				mui.toast(data.message) ;
			}) ;
		});
		function getImage() {//手机相机
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var imgUrl = entry.toLocalURL() + "?version=" + new Date().getTime();
					pathToBase64(imgUrl);
				}, function(e) {
					console.debug("读取拍照文件错误：" + e.message);
				});
			}, function(imgUrl) {
				console.debug("error" + imgUrl);
			}, {
				filename: "_doc/head.jpg"
			})
		}

		function galleryImg() {//手机相册
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					var imgUrl = entry.toLocalURL() + "?version=" + new Date().getTime();
					pathToBase64(imgUrl);
				}, function(e) {
					console.debug("读取拍照文件错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};
		var index=1;
		function pathToBase64(path){
		 	var img = new Image();
		        img.src = path;
		        img.onload = function () {
		            var that = this;
		            //生成比例 
		            var w = that.width,
		                h = that.height;
		                scale = w / h; 
		                w = 360 || w;  //480  你想压缩到多大
		                h = w / scale;
		            //生成canvas
		            var canvas = document.createElement('canvas');
		            var ctx = canvas.getContext('2d');
		            canvas.width = w;
		            canvas.height = h;
		            ctx.drawImage(that, 0, 0, w, h);
		
		            var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8 );   //1z 表示图片质量，越低越模糊。
		            var imgList = document.getElementById('image-list');
		            var imgDiv = document.createElement('div');
		            imgDiv.className = 'image-item upImage';
					imgDiv.style.backgroundImage = 'url(' + base64 + ')';
					imgDiv.setAttribute("data-original",path);
		            
					var closeButton = document.createElement('div');
					closeButton.setAttribute('class', 'image-close');
					closeButton.innerHTML = 'X';
					closeButton.addEventListener('click', function(event) {
						event.stopPropagation();
						event.cancelBubble = true;
						setTimeout(function() {
							imgList.removeChild(imgDiv);
						}, 0);
						return false;
					}, false);
					imgDiv.appendChild(closeButton);
		            imgList.appendChild(imgDiv);
				   	index++;
		    }
		}
	});
	</script>
</html>